<template>
  <div class="Age">
    <ScreenTitle v-model:title-value="titleValue"></ScreenTitle>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="Age">
import { onMounted, ref, inject } from 'vue'

let titleValue = ref('年龄比例')
const charts = ref()

const initEchartsOneFn = () => {
  const Echarts = inject('$echarts')
  let myChart = (Echarts as any).init(charts.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '20%',
      orient: 'vertical',
      left: 'right',
      textStyle: { color: 'r' }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        textStyle: {
          color: 'red'
        },
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'inside',
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '军事' },
          { value: 735, name: '新闻' },
          { value: 580, name: '直播' },
          { value: 484, name: '娱乐' },
          { value: 300, name: '财经' }
        ]
      }
    ]
  }

  myChart.setOption(option)
}
onMounted(() => {
  initEchartsOneFn()
})
</script>

<style scoped>
.Age {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  .charts {
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
</style>
